<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
	div#adDiv {
		width: 2000px;
		height: 400px;
		position: fixed;
	}

	div#switchDiv {
		width: 100px;
		line-height: 200px;
		position: absolute;
		right: 0;
		top: 0;
	}
</style>
<script type="text/javascript">
	window.onload= function(){
		var closeAd=document.querySelector('input');
		var adObj=document.getElementById('adDiv');
		closeAd.onclick=function(){
			adObj.style.display='none';
		}
		var show= document.getElementById("switchDiv");
		show.onclick=function(){
			adObj.style.display == "none" ? adObj.style.display = "block" : adObj.style.display = "none";
        show.value == "隐藏图层" ? show.value = "显示图层" : show.value = "隐藏图层";
		}
//		console.log(show.value);
//		实现了显示/隐藏图层，，下面做缩回效果，先定义一个用来结束的一个方法
        var myTimeout;
        function hideAd(){
        	console.log(adDiv.style.height)
        	var step= 10;
   adDiv.style.height=adDiv.offsetHeight-step+'px';
   if (adDiv.offsetHeight<step) {
   	   clearTimeout(myTimeout);
   } else{
   	   setTimeout=('hideAd()',50);
   }
}
        }
	
//      console.log(typeof adDiv.style.height)
//      console.log(typeo adDiv.style.height)
	
</script>
	<body>
		<input type="button" id="switchDiv" value="隐藏图层" />
	<div id="adDiv" style="height: 400px;">
		<img src="img/12.jpg" width="600px" />
		<!--图层里面再镶嵌一个用来关闭的div-->
	</div>
	</body>
</html>
